import React, {useState, useEffect} from 'react';
import {View, Text, TouchableOpacity, TextInput} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import {Icon} from '@ant-design/react-native';
import styles from '../Register/style';
import {resetPassword} from '../../service/login';

const ResetPswd = () => {
  const navigation = useNavigation();
  const [new_password, setNewPassword] = useState('');
  const [password, onChangeTextPassword] = useState('');
  const submit = () => {
    resetPassword({
      newPassword: new_password,
      oldPassword: password,
    }).then(() => {
      navigation.replace('Login');
    });
  };
  return (
    <AreaView>
      <View style={[styles.input_container, styles.top]}>
        <Icon name="lock" style={styles.passwd_clock} />
        <TextInput
          style={styles.input}
          placeholder="请输入原始密码"
          value={password}
          secureTextEntry={true}
          onChangeText={(text) => onChangeTextPassword(text)}
        />
        <Icon name="eye-invisible" style={styles.passwd_clock} />
      </View>
      <View style={styles.input_container}>
        <Icon name="lock" style={styles.passwd_clock} />
        <TextInput
          style={styles.input}
          placeholder="新密码8位数字、大小写字母和特殊符号"
          value={new_password}
          secureTextEntry={true}
          onChangeText={(text) => setNewPassword(text)}
        />
        <Icon name="eye-invisible" style={styles.passwd_clock} />
      </View>
      <View style={styles.btn_container}>
        <TouchableOpacity  activeOpacity={1} style={styles.btn} onPress={submit}>
          <Text style={styles.btn_text}>提交</Text>
        </TouchableOpacity>
      </View>
    </AreaView>
  );
};

export default ResetPswd;
